<template>
<div>
<!--  面包屑导航区-->
  <el-breadcrumb separator="/">
    <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
    <el-breadcrumb-item>用户管理</el-breadcrumb-item>
    <el-breadcrumb-item>用户列表</el-breadcrumb-item>
  </el-breadcrumb>
<!--  卡片-->
  <el-card >
    <div style="margin-top: 15px;">
<!--      layout布局-->
      <el-row :gutter="40">
        <el-col :span="10">
          <el-input placeholder="请输入内容" v-model="queryInfo.query" clearable @clear="getUserList()">
            <el-button slot="append" icon="el-icon-search" @click="getUserList()"></el-button>
          </el-input>
        </el-col>
        <el-col :span="4">
          <el-button type="primary" @click="addDialogVisible=true">添加用户</el-button>
        </el-col>
      </el-row>
<!--      用户列表-->
      <el-table :data="userList" border stripe >
<!--        索引列 type="index"-->
        <el-table-column type="index" align="center"></el-table-column>
        <el-table-column label="姓名" prop="username" align="center">
        </el-table-column>
        <el-table-column label="邮箱" prop="email" align="center"></el-table-column>
        <el-table-column label="电话" prop="mobile" align="center"></el-table-column>
        <el-table-column label="角色" prop="role_name" align="center"></el-table-column>
        <el-table-column label="状态" align="center">
<!--          作用域插槽 用 slot-scope接受这一行的数据 ,并用scope.row获取这一行的数据-->
          <template slot-scope="scope">
            <el-switch
                v-model="scope.row.mg_state" @change="stateChange(scope.row)">
            </el-switch>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="190px" align="center">
          <template slot-scope="scope">
<!--            修改-->
            <el-button type="primary" icon="el-icon-edit" size="mini" @click="showEditDialog(scope.row.id)"></el-button>
<!--            删除-->
            <el-button type="danger" icon="el-icon-delete"  size="mini" @click="deleteUser(scope.row.id)"></el-button>
<!--            分配角色-->
            <el-tooltip content="分配角色" placement="top" :enterable="false">
              <el-button type="warning" icon="el-icon-setting"  size="mini" @click="setRole(scope.row)"></el-button>
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="queryInfo.pagenum"
          :page-sizes="[1,2,5,10]"
          :page-size="queryInfo.pagesize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
      </el-pagination>
    </div>
  </el-card>
<!--添加用户的对话框-->
  <el-dialog
      title="添加用户"
      :visible.sync="addDialogVisible"
      width="50%"
      @close="addDialogClosed"
     >
<!--    内容主题区域-->
    <el-form :model="addForm" :rules="addFormRules" ref="addFormRuleForm" label-width="70px">
      <el-form-item label="用户名" prop="username">
        <el-input v-model="addForm.username"></el-input>
      </el-form-item>
      <el-form-item label="密码" prop="password">
        <el-input v-model="addForm.password"></el-input>
      </el-form-item>
      <el-form-item label="邮箱" prop="email">
        <el-input v-model="addForm.email"></el-input>
      </el-form-item>
      <el-form-item label="手机" prop="mobile">
        <el-input v-model="addForm.mobile"></el-input>
      </el-form-item>
    </el-form>
<!--    底部按钮-->
    <span slot="footer" class="dialog-footer">
    <el-button @click="addDialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="addUser">确 定</el-button>
  </span>
  </el-dialog>
<!--  修改用户的对话框-->
  <el-dialog
      title="修改用户"
      :visible.sync="editDialogVisible"
      width="50%"
      @close="editDialogClosed"
  >
    <el-form :model="editForm" :rules="editRules" ref="editRef" label-width="70px">
      <el-form-item label="用户名">
        <el-input v-model="editForm.username" disabled></el-input>
      </el-form-item>
      <el-form-item label="邮箱" prop="email">
        <el-input v-model="editForm.email" ></el-input>
      </el-form-item>
      <el-form-item label="手机号" prop="mobile">
        <el-input v-model="editForm.mobile" ></el-input>
      </el-form-item>
    </el-form>
     <span slot="footer" class="dialog-footer">
    <el-button @click="editDialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="editUser">确 定</el-button>
  </span>
  </el-dialog>
<!--  分配角色对话框-->
  <el-dialog
      title="分配角色"
      :visible.sync="setRoleDialogVisible"
      width="50%"
      @close="setRoleDialogClosed"
      >
    <div>
      <p>当前的用户： {{userInfo.username}}</p>
      <p>
        当前的角色： {{userInfo.role_name}}
      </p>
      <p>
        分配新角色：  <el-select v-model="selctedRoleId" placeholder="请选择">
        <el-option
            v-for="item in rolesList"
            :key="item.id"
            :label="item.roleName"
            :value="item.id">
        </el-option>
      </el-select>
      </p>
    </div>
    <span slot="footer" class="dialog-footer">
    <el-button @click="setRoleDialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="saveRoleInfo">确 定</el-button>
  </span>
  </el-dialog>
</div>
</template>

<script>
export default {
  name: "users",
  data(){
    // 验证邮箱的规则
    var checkEmail =(rule,value,callback) =>{
      const regEmail = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-])+/;
      if(regEmail.test(value)){
          // 验证合法
        return callback();
      }
      // 验证不合法
      callback(new Error("请输入合法的邮箱："));
    }
    // 验证手机号的规则
    var checkMoblie =(rule,value,callback) =>{
      const regMobile = /^(0|86|17951)?(13[0-9]|15[012356789]|17[678]|18[0-9]|14[57])[0-9]{8}$/;
      if(regMobile.test(value)){
        return callback();
      }
      callback(new Error("请输入合法的手机号："))
    }
    // 获取用户列表的参数对象
  return{
    queryInfo:{
      "query":'',
      // 当前的页数 ,默认为1页
      "pagenum":1,
      // 当前每页显示多少条 默认显示两条
      "pagesize":2

    },
    // 获取到的用户列表
    userList:[],
    total:0,
    addDialogVisible:false,
    editDialogVisible:false,
    // 分配角色对话框的显示和隐藏
    setRoleDialogVisible:false,
    // 用户的信息数据对象
    userInfo:{},
    // 所有的角色数据列表
    rolesList:[],
    // select 标签 已经选中的id值
    selctedRoleId:'',
    //添加用户的表单数据对象
    addForm:{
      username:'',
      password:'',
      email:'',
      mobile:''
    },
    // 添加用户的规则对象
    addFormRules:{
      username:[
        {required:true,message:"请输入用户名",trigger:'blur'},
        {
          min:3,max:10,message: "用户名长度为3~10个字符之间",trigger: 'blur'
        }
      ],
      password: [
        {required:true,message:'密码不能为空',trigger:'blur'},
        {
          min:3,max:10,message: "密码长度为3~10个字符之间",trigger: 'blur'
        }
      ],
      email:[
        {required:true,message:'邮箱不能为空',trigger:'blur'},
        {
          validator:checkEmail,trigger: 'blur'
        }
      ],
      mobile: [
        {required:true,message:'手机号码不能为空',trigger:'blur'},
        {
          validator:checkMoblie,trigger: 'blur'
        }
      ]
    },
    // 根据用户的id查询到的信息对象
    editForm:{

    },
    // 修改用户的表单验证规则
    editRules:{
      email:[
        {required:true,message:'请输入邮箱',trigger:'blur'},
        {validator:checkEmail,trigger: 'blur'}
      ],
      mobile:[
        {required:true,message:'请输入手机号码',trigger:'blur'},
        {validator:checkMoblie,trigger: 'blur'}
      ]
    }

    }

  },
  created() {
    this.getUserList();
  },
  methods:{
   async getUserList(){
    const {data:res}=await this.$http.get('users',{params:this.queryInfo});
     // console.log(res);
     if(res.meta.status!==200){
       return this.$message.error("获取用户列表失败！");
     }
      this.userList=res.data.users;
     this.total=res.data.total;
   },
    // 监听最新的 pagesize 改变的事件,并根据pagesize的改变重新发起用户列表请求
    handleSizeChange(newSize){
        this.queryInfo.pagesize=newSize;
        this.getUserList();
    },
    // 监听当前页码的变化，并根据pagenum的改变重新发起用户列表请
    handleCurrentChange(newPage){
      this.queryInfo.pagenum=newPage;
      this.getUserList();
    },
  //  监听用户状态的变化
   async stateChange(state){
    // 当 switch 开关的状态改变时发起请求
      const {data:res}=await this.$http.put(`users/${state.id}/state/${state.mg_state}`);
      if(res.meta.status !==200){
      //   数据库更新状态失败则将 已经更改了的状态还原
        state.mg_state=! state.mg_state;
        return this.$message.error("更改状态失败")
      }else {
        this.$message.success("更改用户状态成功。");
      }
    },
    // 监听 添加用户的对话框关闭事件
    addDialogClosed(){
        this.$refs.addFormRuleForm.resetFields();
    },
    // 点击按钮，添加新用户
    addUser(){
     // 先对表单进行整体验证
      this.$refs.addFormRuleForm.validate(async valid =>{
        if(!valid){
          return;
        }
        // 校验成功，发起添加请求
      const {data:res}=await this.$http.post('users',this.addForm);
        if(res.meta.status !==201){
          this.$message.error("添加失败！");
        }
        this.$message.success("添加成功");
        // 隐藏添加用户的对话框
        this.addDialogVisible=false;
        // 重新获取用户列表
        this.getUserList();
      })

    },
    // 修改用户的对话框显示和隐藏
   async showEditDialog(id){
      const {data:res}=await this.$http.get('users/'+id);
      if(res.meta.status!==200){
        this.$message.error('获取信息失败！');
      }
      // 成功根据id获取到用户信息
     this.editForm=res.data;
     this.editDialogVisible = !this.editDialogVisible;
    },
    // 重置修改用户信息的对话框
    editDialogClosed(){
     this.$refs.editRef.resetFields();
    },
    // 提交修改之前
    editUser(){
     this.$refs.editRef.validate(async valid=>{
       if(!valid){
         return;
       }
       // 发起修改用户信息的请求
       const {data:res}=await this.$http.put('users/'+this.editForm.id,{
         email:this.editForm.email,
         mobile:this.editForm.mobile
       })
       if(res.meta.status !==200){
         return this.$message.error('更新用户信息失败')
       }
       // 更新用户信息成功
       this.getUserList();
       this.editDialogVisible=false;
       this.$message.success('更新用户信息成功');
     })
    },
    // 删除用户按钮的功能（根据用户的id）
   async deleteUser(id){
     // alert(id);
     // 询问用户确定删除数据
   const confirmResult= await  this.$confirm('此操作将永久删除该用户, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).catch(err=>err)

     //如果用户点确认删除，返回confirm 取消则返回cancel  都为字符串
     if(confirmResult !=='confirm'){
       return this.$message.info("已经取消删除");
     }
     // 点击确认，则向服务器发送请求
     const {data:res}=await this.$http.delete('users/'+id);
      if(res.meta.status!==200){
        return this.$message.error('删除失败');
      }
      // 删除成功
     this.$message.success('删除用户成功');
      // 重新获取用户列表
      this.getUserList();

    },
    // 展示分配角色的对话框
   async setRole(obj){
     const  {data:res}=await this.$http.get('roles');
     if(res.meta.status !==200){
       return this.$message.error("获取角色失败")
     }
     // 获取角色列表成功,先保存获取到的角色数据
     this.rolesList=res.data;
     // console.log(this.rolesList);
     this.userInfo=obj;
      this.setRoleDialogVisible=true;
    },
    // 保存用户选择的角色
   async saveRoleInfo(){
      if(!this.selctedRoleId){
        return this.$message.error("请先选择要分配的角色");
      }
      //
      const {data:res}=await this.$http.put(`users/${this.userInfo.id}/role`,{
        rid:this.selctedRoleId
      })
     if(res.meta.status !==200){
       return this.$message.error("更新角色失败")
     }
      this.$message.success('更新角色成功');
     this.getUserList();
     this.setRoleDialogVisible=false;
    },
  // 分配角色对话框关闭后重置对话框内容
    setRoleDialogClosed(){
        this.selctedRoleId='',
         this.userInfo={}
    }
  }
}
</script>

<style scoped lang="less">

</style>